import React from 'react';
import { connect } from 'dva';
import { Table, Spin } from 'antd';


@connect((state) => {
  // state.node是models里的namespace
  return { ...state.nodeLog, loading: state.loadingBar === 1 };
})


export default class NodeLogTable extends React.Component {

  columns = [{
    title: '节点标识',
    dataIndex: 'identity',
    key: 'identity',
  }, {
    title: '节点类型',
    dataIndex: 'nodeType',
    key: 'nodeType',
  }, {
    title: '事件',
    key: 'event',
    render: (value, row) => {
      if (row.event === 'ONLINE') {
        return (
          '上线'
        );
      } else {
        return (
          '下线'
        );
      }
    },
  }, {
    title: '时间',
    dataIndex: 'logTime',
    key: 'logTime',
  }];

  changePageHandler = (pageNum, pageSize) => {
    const { dispatch, event, identity, startTime, endTime } = this.props;
    dispatch({
      type: 'nodeLog/queryNodeLogList', // node是model的namespace，queryNodeList是model里的effect方法
      payload: {
        pageNum,
        pageSize,
        event,
        identity,
        startLogTime: startTime,
        endLogTime: endTime,
      },
    });
  }
  changePageSizeHandler = (current, pageSize) => {
    const { dispatch, event, identity, startTime, endTime } = this.props;
    dispatch({
      type: 'nodeLog/queryNodeLogList',
      payload: {
        pageNum: current,
        pageSize,
        event,
        identity,
        startLogTime: startTime,
        endLogTime: endTime,
      },
    });
  }
  render = () => {
    const { list, total, pageSize: size, loading } = this.props;
    return (
      <div className="spider-container">
        <Spin spinning={loading} delay={3}>
          <Table
            rowKey="id" columns={this.columns} dataSource={list} size="middle"
            pagination={{
              pageSize: size,
              showQuickJumper: true,
              size: 'middle',
              total,
              onChange: (pageTo, pageSize) => this.changePageHandler(pageTo, pageSize),
              onShowSizeChange: (current, pageSize) =>
                this.changePageSizeHandler(current, pageSize),
              showSizeChanger: true,
              pageSizeOptions: ['10', '20', '30', '50', '100'],
            }}
          />
        </Spin>
      </div>
    );
  }
}
